<template>
  <div ref="myChart" id="myChart" :style="{ width: '1000px', height: '400px' }"></div>
</template>

<script>
import { getCurrentInstance, onMounted } from 'vue';

export default {
  setup() {
    // 通过 internalInstance.appContext.config.globalProperties 获取全局属性或方法
    let internalInstance = getCurrentInstance();
    let echarts = internalInstance.appContext.config.globalProperties.$echarts;

    onMounted(() => {
      const dom = document.getElementById('myChart');
      const myChart = echarts.init(dom); // 初始化echarts实例
      const option = {
        // 设置背景色
        backgroundColor: 'rgba(8, 22, 34, 1)',

        title: {
          text: '24小时用水量',
          subtext: '',
          left: 'left',
          top: 5, // 定位
          left: 50,
          // 定位
          textStyle: {
            color: '#00FFFF',
            fontSize: 20,
          },
          subtextStyle: {
            // 副标题样式
            color: "#00FFFF",
            fontSize: 16,
          },
        },

        //  图表距边框的距离,可选值：'百分比'¦ {number}（单位px）
        grid: {
          top: '15%', 
          left: '3%',
          right: '8%',
          bottom: '3%',
          containLabel: true
        },

        tooltip: {    //提示框组件   
          trigger: 'item',
          lineStyle: {
            color: "#000",
            width: 0.5,
            type: "solid",
          },
        },

        xAxis: {
          type: 'category',
          data: ['0时','1时','2时','3时','4时','5时','6时','7时','8时','9时','10时','11时','12时','13时','14时','15时','16时','17时','18时','19时','20时','21时','22时','23时'],
          axisLine: {
            lineStyle: {
              // 设置x轴颜色
              color: '#eaeef1'
            }
          },
        },
        yAxis: {
          //name: '用水量(ml)',
          type: 'value',
          axisLine: {
            lineStyle: {
              // 设置y轴颜色
              color: '#eaeef1'
            }
          },
          splitNumber: 6,
          splitLine:{ 
            show: true,
            lineStyle: {
            color: '#ccc',
            width: 1,//0可以隐藏
            type: 'dashed'
          }         
        }
        },
        series: [
          {
            name: '用水量',
            //数据
            data: [820, 932, 901, 934, 1290, 1330, 1320,1358,
                  1366,1400,1470,1480,1490,1540,1620,1630,1640,
                  1750,2660,3511,2234,2222,2543,3214],
            type: 'line',
            smooth: 0.7,
            // 设置拐点为实心圆
            symbol: 'circle',
            symbolSize: 8,
            itemStyle: {
              normal: {   
                //color: '#00FFFF', 
                // 拐点上显示数值
                label: {
                  show: true
                },
                lineStyle: {
                width: 4,  // 设置线宽
                type: 'solid',//虚实
                // 使用rgba设置折线透明度为0，可以视觉上隐藏折线
                color: '#00FFFF'
                }
              }
            },
            emphasis: {
                itemStyle: {
                    color: '#FF0000' // hover状态下的拐点颜色
                }
            }
          }
        ]
      };
      // 设置实例参数
      myChart.setOption(option);
    });
    return {};
  }
};
</script>